<template>
  <div class="app-container dashboard">
    <!-- 统计卡片区域 -->
    <el-row :gutter="24" class="card-panel">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" class="card-panel-item">
        <div class="card-panel-content">
          <div class="card-panel-icon-wrapper">
            <svg-icon icon-class="dashboard" class="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">总库存量</div>
            <div class="card-panel-num">8,846</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" class="card-panel-item">
        <div class="card-panel-content">
          <div class="card-panel-icon-wrapper" style="background: rgba(82, 196, 26, 0.1);">
            <svg-icon icon-class="money" class="card-panel-icon" style="color: #52C41A;" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日入库</div>
            <div class="card-panel-num">1,234</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" class="card-panel-item">
        <div class="card-panel-content">
          <div class="card-panel-icon-wrapper" style="background: rgba(250, 173, 20, 0.1);">
            <svg-icon icon-class="shopping" class="card-panel-icon" style="color: #FAAD14;" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">今日出库</div>
            <div class="card-panel-num">876</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" class="card-panel-item">
        <div class="card-panel-content">
          <div class="card-panel-icon-wrapper" style="background: rgba(19, 194, 194, 0.1);">
            <svg-icon icon-class="peoples" class="card-panel-icon" style="color: #13C2C2;" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">活跃用户</div>
            <div class="card-panel-num">98,500</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表和数据区域 -->
    <el-row :gutter="24" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>库存趋势</span>
              <el-dropdown trigger="click" class="chart-dropdown">
                <span class="el-dropdown-link">
                  <el-icon class="el-icon--right"><more-filled /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>查看详情</el-dropdown-item>
                    <el-dropdown-item>导出数据</el-dropdown-item>
                    <el-dropdown-item>刷新</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
          <div class="chart-content">
            <!-- 这里可以放置一个图表组件 -->
            <div class="chart-placeholder">
              <el-empty description="暂无图表数据" />
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span>常用功能</span>
            </div>
          </template>
          <div class="common-functions-content">
            <el-row :gutter="24">
              <el-col :span="6" v-for="(action, index) in quickActions" :key="index">
                <div class="common-function-item" @click="handleQuickAction(action)">
                  <div class="function-icon-wrapper" :style="{ background: action.bgColor }">
                    <el-icon :size="24" :color="action.color">
                      <component :is="action.icon"></component>
                    </el-icon>
                  </div>
                  <span class="function-name">{{ action.name }}</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 通知公告和出入库明细 -->
    <el-row :gutter="24" class="bottom-row">
      <el-col :xs="24" :sm="24" :md="16" :lg="14">
        <el-card shadow="hover" class="timeline-card">
          <template #header>
            <div class="card-header">
              <span>今日出入库明细</span>
              <el-tag size="small" type="primary">实时数据</el-tag>
            </div>
          </template>
          <div class="timeline-content">
            <el-timeline>
              <el-timeline-item
                v-for="(activity, index) in activities"
                :key="index"
                :type="activity.type"
                :color="activity.color"
                :timestamp="activity.timestamp"
                :hollow="activity.hollow"
              >
                <el-card class="timeline-card-item">
                  <div class="timeline-header">
                    <h4>{{ activity.title }}</h4>
                    <span class="timeline-tag" :style="{ background: activity.color }">{{ activity.type === 'success' ? '入库' : activity.type === 'warning' ? '出库' : activity.type === 'primary' ? '盘点' : '系统' }}</span>
                  </div>
                  <p>{{ activity.content }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="24" :md="8" :lg="10">
        <el-card shadow="hover" class="notice-card">
          <template #header>
            <div class="card-header">
              <span>通知公告</span>
              <el-button text type="primary">查看全部</el-button>
            </div>
          </template>
          <div class="notice-content">
            <el-collapse v-model="activeNames">
              <el-collapse-item v-for="item in noticeList" :key="item.noticeId" :title="item.noticeTitle" :name="item.noticeId">
                <div class="notice-item-content" v-html="item.noticeContent"></div>
              </el-collapse-item>
            </el-collapse>
            <div v-if="noticeList.length === 0" class="empty-notice">
              <el-empty description="暂无通知公告" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { 
  MoreFilled, 
  Plus, 
  Printer, 
  Search, 
  Download, 
  Upload, 
  Setting, 
  Document, 
  Refresh,
  Goods,
  Tickets,
  List,
  TrendCharts
} from '@element-plus/icons-vue'
import { listNotice } from "@/api/system/notice"

// 定义接口类型
interface Notice {
  noticeId: number
  noticeTitle: string
  noticeContent: string
  createTime: string
}

interface QuickAction {
  name: string
  icon: string
  color: string
  bgColor: string
}

// 公告列表
const noticeList = ref<Notice[]>([])
const activeNames = ref<number[]>([])

// 活动时间线数据
const activities = reactive([
  {
    title: '入库单 #12345',
    content: '商品入库完成，共计 120 件',
    timestamp: '10:30',
    type: 'success',
    color: '#67C23A',
    hollow: false
  },
  {
    title: '出库单 #67890',
    content: '订单出库处理，共计 45 件',
    timestamp: '09:15',
    type: 'warning',
    color: '#E6A23C',
    hollow: false
  },
  {
    title: '库存盘点 #34567',
    content: '仓库 A 区域盘点完成',
    timestamp: '08:00',
    type: 'primary',
    color: '#409EFF',
    hollow: false
  },
  {
    title: '系统维护',
    content: '系统例行维护，持续 30 分钟',
    timestamp: '昨天',
    type: 'info',
    color: '#909399',
    hollow: true
  }
])

// 快捷操作
const quickActions = reactive([
  { 
    name: '入库管理', 
    icon: 'Goods', 
    color: '#FFFFFF', 
    bgColor: 'rgba(64, 158, 255, 0.8)' 
  },
  { 
    name: '出库管理', 
    icon: 'Tickets', 
    color: '#FFFFFF', 
    bgColor: 'rgba(82, 196, 26, 0.8)' 
  },
  { 
    name: '库存查询', 
    icon: 'Search', 
    color: '#FFFFFF', 
    bgColor: 'rgba(250, 173, 20, 0.8)' 
  },
  { 
    name: '库存盘点', 
    icon: 'List', 
    color: '#FFFFFF', 
    bgColor: 'rgba(245, 108, 108, 0.8)' 
  },
  { 
    name: '数据统计', 
    icon: 'TrendCharts', 
    color: '#FFFFFF', 
    bgColor: 'rgba(19, 194, 194, 0.8)' 
  },
  { 
    name: '系统设置', 
    icon: 'Setting', 
    color: '#FFFFFF', 
    bgColor: 'rgba(144, 147, 153, 0.8)' 
  },
  { 
    name: '打印报表', 
    icon: 'Printer', 
    color: '#FFFFFF', 
    bgColor: 'rgba(103, 119, 239, 0.8)' 
  },
  { 
    name: '帮助文档', 
    icon: 'Document', 
    color: '#FFFFFF', 
    bgColor: 'rgba(179, 127, 235, 0.8)' 
  }
])

// 查询公告列表
function getNoticeList() {
  const queryParams = {
    pageNum: 1,
    pageSize: 5
  }

  listNotice(queryParams).then((response: any) => {
    noticeList.value = response.rows || []
    if (noticeList.value.length > 0) {
      activeNames.value = [noticeList.value[0].noticeId]
    }
  }).catch(() => {
    // 如果API调用失败，使用模拟数据
    noticeList.value = [
      {
        noticeId: 1,
        noticeTitle: '系统维护通知',
        noticeContent: '系统将于今晚22:00-24:00进行维护，请提前做好相关准备。',
        createTime: '2024-01-15 10:00:00'
      },
      {
        noticeId: 2,
        noticeTitle: '新功能上线',
        noticeContent: 'WMS系统新增商户余额管理功能，欢迎体验使用。',
        createTime: '2024-01-14 15:30:00'
      }
    ]
    if (noticeList.value.length > 0) {
      activeNames.value = [noticeList.value[0].noticeId]
    }
  })
}

// 处理快捷操作点击
function handleQuickAction(action: QuickAction) {
  console.log('点击了功能:', action.name)
  // 这里可以根据不同操作执行不同的逻辑
}

onMounted(() => {
  getNoticeList()
})
</script>

<style lang="scss" scoped>
.dashboard {
  padding: 20px;
  
  .card-panel {
    margin-bottom: 24px;
    
    &-item {
      margin-bottom: 24px;
      cursor: pointer;
      
      .card-panel-content {
        display: flex;
        padding: 20px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        
        &:hover {
          box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
          transform: translateY(-2px);
        }
      }
      
      .card-panel-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        border-radius: 8px;
        background: rgba(64, 158, 255, 0.1);
        margin-right: 16px;
      }
      
      .card-panel-icon {
        font-size: 28px;
        color: #409EFF;
      }
      
      .card-panel-description {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      
      .card-panel-text {
        font-size: 14px;
        color: #606266;
        margin-bottom: 8px;
      }
      
      .card-panel-num {
        font-size: 24px;
        font-weight: 600;
        color: #303133;
      }
    }
  }
  
  .chart-row, .bottom-row {
    margin-bottom: 24px;
  }
  
  .chart-card, .notice-card, .timeline-card {
    height: 100%;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
    
    .chart-content {
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .chart-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .common-functions-content {
    padding: 16px 0;
    
    .common-function-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-2px);
      }
      
      .function-icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        margin-bottom: 8px;
        transition: all 0.3s;
        
        &:hover {
          transform: scale(1.05);
        }
      }
      
      .function-name {
        font-size: 14px;
        color: #606266;
        margin-top: 8px;
      }
    }
  }
  
  .timeline-content {
    max-height: 400px;
    overflow-y: auto;
    padding: 0 10px;
    
    .timeline-card-item {
      margin-bottom: 0;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      
      .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        h4 {
          margin: 0;
          font-size: 14px;
          font-weight: 500;
          color: #303133;
        }
        
        .timeline-tag {
          padding: 2px 6px;
          border-radius: 4px;
          font-size: 12px;
          color: #FFFFFF;
        }
      }
      
      p {
        margin: 0;
        font-size: 12px;
        color: #606266;
      }
    }
  }
  
  .notice-content {
    .notice-item-content {
      padding: 8px 0;
      font-size: 14px;
      color: #606266;
      line-height: 1.6;
    }
    
    .empty-notice {
      padding: 20px 0;
    }
  }
}
</style>

